<template>
	<div :id="echartId" :style="styles"></div>
</template>

<script setup>
	import { getUUID } from '@/utils';
	import echarts from '@/utils/echarts.js';
	// 暴露的配置option
	const prop = defineProps({
		config: {
			type: Object,
		},
	});
	// echart实例
	let myChart = null;
	// 样式-主要的width,height
	let styles = ref({ width: '100%', height: '100%' });
	// container的id
	let echartId = computed(() => {
		return 'echartId' + getUUID();
	});
	function handleSetVisitChart() {
		// 获取dom节点
		myChart = echarts.init(document.getElementById(toValue(echartId)));
		let option = null;
		option = prop.config;
		// 设置option
		myChart.setOption(option, true);
	}
	function handleResize() {
		// 重置
		myChart.resize();
	}
	onMounted(() => {
		nextTick(() => {
			// 初始化
			handleSetVisitChart();
			// 监听窗口大小变化
			window.addEventListener('resize', handleResize);
		});
	});
	onBeforeUnmount(() => {
		// 组件销毁之前移除事件监听器
		window.removeEventListener('resize', handleResize);
		if (!myChart) {
			return;
		}
		myChart.dispose();
		myChart = null;
	});
</script>

<style scoped></style>
